<template>
  <div class="turn-container">
    <!-- <router-link v-if="isAdmin == 1" to="/photoAlbum" class="colse-btn">
      <span>关闭</span>
    </router-link> -->
    <!-- 工具条 -->
    <div
      class="fbTopBar"
      id="fbTopBar"
      :class="isTouch ? 'fbTopBar-mobile' : ''"
    >
      <div class="buttonBar">
        <div class="button zoom-icon zoom-icon-in">
          <img v-if="isZoomIn" src="@/assets/tools/zoomIn.png" title="放大" />
          <img v-else src="../../assets/tools/zoomOut.png" title="缩小" />
        </div>
        <div id="menu" class="button" @click="menuvisible = true">
          <img src="@/assets/tools/menu.png" title="目录" />
        </div>
        <div id="tofirst" class="button">
          <img src="../../assets/tools/first.png" title="第一页" />
        </div>
        <div id="topreview" class="button">
          <img src="../../assets/tools/preview.png" title="上一页" />
        </div>
        <div id="tonext" class="button">
          <img src="../../assets/tools/next.png" title="下一页" />
        </div>
        <div id="tolast" class="button">
          <img src="../../assets/tools/last.png" title="最后一页" />
        </div>
        <div id="autoplay" class="button">
          <img v-if="isPlay" src="@/assets/tools/play.png" title="自动播放" />
          <img v-else src="../../assets/tools/pause.png" title="暂停播放" />
        </div>
        <div id="soundshandle" class="button">
          <img v-if="isSounds" src="@/assets/tools/sounds.png" title="声音" />
          <img v-else src="../../assets/tools/nosounds.png" title="声音" />
        </div>
        <div id="tofullscreen" class="button">
          <img
            v-if="isFullscreen"
            src="@/assets/tools/fullscreen.png"
            title="全屏"
          />
          <img v-else src="../../assets/tools/screen.png" title="退出全屏" />
        </div>
      </div>
    </div>
    <div id="canvas">
      <!-- 分享 -->
      <div class="sharebox">
        <div id="share" class="button" @click="showDrawer">
          <img src="../../assets/tools/share.png" title="分享" />
        </div>
        <a-drawer
          v-model:visible="visible"
          class="custom-class"
          bodyStyle="background-color:#130406;color:#fff;"
          headerStyle="background-color:#130406;color:#fff;"
          height="auto"
          :closable="false"
          title="分享"
          placement="bottom"
          @after-visible-change="afterVisibleChange"
        >
          <template #extra>
            <!-- <a-button type="text" style="margin-right: 8px" @click="onClose"
              >取消</a-button
            > -->
            <!-- <a-button type="primary" @click="onClose">Submit</a-button> -->
          </template>
          <div class="shareSwiper stage" style="overflow: hidden auto"
            ><div class="swiper"
              ><a @click="showinfoimg = true"
                ><div class="item" style="color: rgb(255, 255, 255)"
                  ><img class="logo" src="../../assets/tools/wechat.svg" /><div
                    class="logo_title"
                    >微信</div
                  ></div
                ></a
              ><a @click="createPoster"
                ><div class="item" style="color: rgb(255, 255, 255)"
                  ><img class="logo" src="../../assets/tools/poster.svg" /><div
                    class="logo_title"
                    >海报</div
                  ></div
                ></a
              ><a @click="showinfoimg = true"
                ><div class="item" style="color: rgb(255, 255, 255)"
                  ><img class="logo" src="../../assets/tools/qq.svg" /><div
                    class="logo_title"
                    >QQ好友</div
                  ></div
                ></a
              ><a id="copy_url" data-clipboard-action="copy" @click="copyUrl"
                ><div class="item" style="color: rgb(255, 255, 255)"
                  ><img class="logo" src="../../assets/tools/link.svg" /><div
                    class="logo_title"
                    >链接</div
                  ></div
                ></a
              ><a @click="downloadQrcode"
                ><div class="item" style="color: rgb(255, 255, 255)"
                  ><img class="logo" src="../../assets/tools/poster.svg" /><div
                    class="logo_title"
                    >下载二维码</div
                  ></div
                ></a
              ></div
            ></div
          >
        </a-drawer>
        <div v-if="showinfoimg" class="infobg">
          <div class="infoimg"></div>
        </div>
        <!-- 海报html元素 -->
        <!-- 海报展示img -->
        <div
          class="showposterboxbg"
          v-show="showposter"
          @click="
            showposter = false;
            posterImgShow = false;
          "
        ></div>
        <div class="showposterbox" v-show="posterImgShow">
          <a-button @click="downPoster" class="down" size="small">{{
            !isTouch ? '下载图片' : '长按保存图片'
          }}</a-button>
          <img :src="posterImg" alt="" />
        </div>
      </div>
      <!-- 跳转页面 -->
      <div class="pageBar">
        <div class="pageNumber" id="tfPageIndex">
          <a-input
            :bordered="false"
            id="currentPageIndexTextField"
            v-model:value="currentPage"
            :suffix="'/' + imgList.length"
            @pressEnter="jumpPage()"
          />
        </div>
        <div
          class="btnGotoPage"
          style="color: rgb(204, 204, 204)"
          @click="jumpPage()"
          >GO</div
        >
      </div>
      <!-- 翻页主体 -->
      <div class="magazine-viewport">
        <!-- book -->
        <div class="container">
          <div class="magazine"></div>
        </div>
        <!-- button -->
        <div ignore="1" class="next-button"></div>
        <div ignore="1" class="previous-button"></div>
        <!-- slider -->
        <div
          v-if="!isTouch"
          class="bottom"
          :class="isTouch ? 'bottom-mobile' : ''"
        >
          <div id="slider-bar" class="turnjs-slider slider-bar">
            <!-- <div id="slider"></div> -->
            <div
              v-for="(item, index) in imgList"
              :key="index"
              class="slider"
              :class="{ 'slider-current': index + 1 == currentPage }"
              @click="toPage(index)"
            ></div>
          </div>
        </div>
      </div>
    </div>
    <audio
      controls
      ref="bgAudio"
      id="bgAudio"
      class="bgAudio"
      autoplay
      loop="loop"
      style="display: none"
    >
      <source src="../../assets/audios/BackgroundSoundURL.mp3" />
    </audio>
    <audio
      controls
      ref="flipAudio"
      id="flipAudio"
      class="flipAudio"
      style="display: none"
    >
      <source src="../../assets/audios/flipsound.mp3" type="audio/mpeg" />
      <source src="../../assets/audios/flipsound.ogg" type="audio/ogg" />
    </audio>
    <!-- 目录 -->
    <a-drawer
      v-model:visible="menuvisible"
      class="custom-class-menu"
      title="目录"
      placement="right"
    >
      <a-input-search placeholder="目录" @search="onSearch" />
      <a-list size="small" :data-source="menuList">
        <template #renderItem="{ item }">
          <a-list-item @click="toPageMenu(item.sort)">{{
            `P${item.sort} ${item.name}`
          }}</a-list-item>
        </template>
      </a-list>
    </a-drawer>
    <!-- 海报实体，不能用隐藏，采用移位 -->
    <div id="posterHtml">
      <div>
        <img
          v-if="imgList[0]"
          class="img"
          :src="API_BASE_URL + 'img?name=' + imgList[0].imgThumbnail"
          alt=""
        />
      </div>
      <div class="content">{{ posterContent }}</div>
      <!-- 二维码 -->
      <qrcode-vue class="qrcode" :value="qrcodetext" size="90" level="H" />
    </div>
    <!-- 512尺寸二维码 -->
    <qrcode-vue
      class="downQrcode"
      :value="qrcodetext"
      size="512"
      level="H"
      style="transform: translate(-100%, -100%)"
    />
  </div>
</template>
<script>
  import { ref, nextTick, onMounted, unref, getCurrentInstance } from 'vue';
  import { getPageFrontList } from '@/api/frontEndAlbum';
  import { API_BASE_URL } from '@/config/setting';
  import { message } from 'ant-design-vue';
  import { useRouter } from 'vue-router';
  import { messageLoading } from 'ele-admin-pro';
  import $ from 'jquery';
  // 滚动条依赖
  import slider from '../../utils/js/jquery-ui-1.8.20.custom.min.js';
  // import 'jquery-ui-dist/jquery-ui';
  // import 'jquery-ui-dist/jquery-ui.min.css';
  import Hash from '../../utils/js/hash.js';
  import turn from '../../utils/js/turn.js';
  import zoom from '../../utils/js/zoom.min.js';
  import {
    setArrows,
    addPage,
    loadPage,
    zoomTo,
    loadRegions,
    addRegion,
    regionClick,
    processRegion,
    loadLargePage,
    loadSmallPage,
    isChrome,
    disableControls,
    resizeViewport,
    numberOfViews,
    // getViewNumber,
    // largeMagazineWidth,
    // decodeParams,
    // calculateBound,
    moveBar,
    setPreview
  } from '../../utils/js/magazine.js';
  // import { onBeforeRouteLeave } from 'vue-router';

  import QrcodeVue from 'qrcode.vue';
  import html2canvas from 'html2canvas';
  import { wechatConfig } from '@/utils/wechatSdk.js';
  import router from '@/router';

  export default {
    components: {
      QrcodeVue
    },
    setup() {
      const { ctx: that, proxy } = getCurrentInstance(); // 获取全局挂载
      const { currentRoute } = useRouter();
      const { query } = unref(currentRoute);
      const currentPage = ref(1);

      const imgList = ref([]);
      const menuList = ref([]);
      const sliderList = ref([]);

      const isZoomIn = ref(true);
      const isPlay = ref(true);
      const isFullscreen = ref(true);
      const isSounds = ref(true);

      const showinfoimg = ref(false); // 遮罩
      const showposter = ref(false);
      const posterContent = ref(query.name);
      const isAdmin = ref(query.isAdmin);
      const posterImg = ref(''); // 最终的海报图片
      const posterImgShow = ref(false); // 海报显隐
      const qrcodetext = ref(''); // 二维码信息
      const qrcodetextHandle = () => {
        // 用户二维码 替换isAdmin参数
        let url = window.location.href;
        if (url.indexOf('isAdmin') != -1) {
          qrcodetext.value = url.replace('&isAdmin=1', '');
        }
      };

      const timer = ref(null);
      const isTouch = ref(false);

      const visible = ref(false);
      const menuvisible = ref(false);
      const showDrawer = () => {
        visible.value = true;
      };
      const onClose = () => {
        visible.value = false;
      };
      const afterVisibleChange = (e) => {
        console.log(e);
        showinfoimg.value = false;
      };

      const copyUrl = () => {
        var textArea = document.createElement('textarea');
        document.body.appendChild(textArea);
        textArea.readOnly = 'readonly';
        textArea.style.opacity = '0';
        textArea.value = window.location.href; //你的要被复制的链接
        textArea.select();
        if (textArea.setSelectionRange)
          textArea.setSelectionRange(0, textArea.value.length);
        else textArea.select();
        document.execCommand('copy');
        message.success('链接已复制');
        document.body.removeChild(textArea);
      };

      const createQrcode = (text) => {
        // 生成二维码
        const qrcodeImgEl = document.getElementById('qrcodeImg');
        qrcodeImgEl.innerHTML = '';
        let qrcode = new QRCode(qrcodeImgEl.value, {
          width: 256,
          height: 256,
          colorDark: '#000000',
          colorLight: '#ffffff',
          correctLevel: QRCode.CorrectLevel.H
        });
        qrcode.makeCode(window.location.href);
      };
      const createPoster = () => {
        // console.log('生成');
        visible.value = false; // 关闭分享遮罩
        showposter.value = true;
        // 第一次点击海报，走生成方法
        if (!posterImg.value) {
          const hide = messageLoading('生成中..', 0);
          // 生成海报
          // dom元素show之后才能转换
          nextTick(() => {
            html2canvas(document.getElementById('posterHtml'), {
              useCORS: true // 使用跨域
              // allowTaint: false,
              // logging: false,
              // letterRendering: true
            }).then((canvas) => {
              // 转换成base64格式，这个格式可以挂载到img里
              // console.log(canvas);
              hide();
              const base64 = canvas
                .toDataURL()
                .replace(/^data:image\/(png|jpg);base64,/, '');
              posterImg.value = `data:image/png;base64,${base64}`;
              // 在微信里,可长按保存或转发
              posterImg.value = canvas.toDataURL('image/png');
              posterImgShow.value = true;
              // console.log(posterImg.value);
            });
          });
        } else {
          posterImgShow.value = true;
        }
      };
      const downPoster = () => {
        let link = document.createElement('a');
        link.href = posterImg.value; //base64
        link.download = '海报.png';
        link.click();
      };
      // 下载二维码
      const downloadQrcode = () => {
        var canvasData = document.getElementsByClassName('downQrcode');
        let link = document.createElement('a');
        link.href = canvasData[0].toDataURL(); //base64
        link.download = '二维码';
        link.click();
        message.success('保存成功');
      };
      // 目录搜索
      const onSearch = (searchValue) => {
        if (searchValue) {
          menuList.value = menuList.value.filter(
            (i) => i.name.indexOf(searchValue) > -1
          );
        } else {
          menuList.value = imgList.value;
        }
      };

      onMounted(() => {
        qrcodetextHandle();
        listPageFrontList();
        console.log(router);
        if (query.id == 'd4b9fb772186b7bf2166402395e3d765') {
          nextTick(() => {
            that.$forceUpdate();
          });
        }
        //初始化左右箭头
        setArrows();

        // Zoom icon
        $('.zoom-icon')
          .bind('mouseover', function () {
            if ($(this).hasClass('zoom-icon-in'))
              $(this).addClass('zoom-icon-in-hover');

            if ($(this).hasClass('zoom-icon-out'))
              $(this).addClass('zoom-icon-out-hover');
          })
          .bind('mouseout', function () {
            if ($(this).hasClass('zoom-icon-in'))
              $(this).removeClass('zoom-icon-in-hover');

            if ($(this).hasClass('zoom-icon-out'))
              $(this).removeClass('zoom-icon-out-hover');
          })
          .bind('click', function () {
            if ($(this).hasClass('zoom-icon-in')) {
              $('.magazine-viewport').zoom('zoomIn');
              isZoomIn.value = false;
            } else if ($(this).hasClass('zoom-icon-out')) {
              $('.magazine-viewport').zoom('zoomOut');
              isZoomIn.value = true;
            }
          });

        $('#canvas').hide();

        document.addEventListener('visibilitychange', handleVisiable);

        if (isSounds.value) {
          // 播放
          var bgAudio = document.getElementById('bgAudio');
          bgAudio.play();
        }

        if ($.isTouch) {
          isTouch.value = true;
        } else {
          isTouch.value = false;
        }
      });
      // 监听页面切出
      const handleVisiable = (e) => {
        // console.log(e.target.visibilityState);
        var bgAudio = document.getElementById('bgAudio');
        switch (e.target.visibilityState) {
          case 'prerender':
            break;
          case 'hidden':
            bgAudio.pause();
            break;
          case 'visible':
            if (isSounds.value) {
              bgAudio.play();
            } else {
              bgAudio.pause();
            }
            break;
        }
      };
      /**
       * 获取内页列表
       */
      const listPageFrontList = () => {
        getPageFrontList({
          albumId: query.id
        })
          .then((res) => {
            // console.log('==listPageFrontList=====' + JSON.stringify(res));
            imgList.value = res.list;
            menuList.value = res.list;
            // 引发报错，去掉（此slider方法未使用）
            // let len = res.list.length / 2 + 1; // 滚动条数量
            // sliderList.value = [...Array(len).keys()];

            loadApp(); // 初始化book

            let sharePic =
              API_BASE_URL + 'img?name=' + imgList.value[0].imgThumbnail;
            // 自定义微信分享
            wechatConfig(
              proxy,
              posterContent.value + '宣传画册', //'分享标题'
              posterContent.value + '宣传画册', //'分享描述'
              qrcodetext.value, //'分享链接'
              sharePic // '分享封面（配图）'
            ).then((res) => {
              //自定义回调内容
              console.log(res);
            });
          })
          .catch((err) => {
            message.error(err.message);
          });
      };

      // 主功能
      const loadApp = () => {
        $('#canvas').fadeIn(1000);
        var flipbook = $('.magazine');
        // Check if the CSS was already loaded
        if (flipbook.width() == 0 || flipbook.height() == 0) {
          setTimeout(loadApp, 10);
          return;
        }
        // 创建flipbook
        nextTick(() => {
          flipbook.turn({
            width: 1200,
            height: 781,
            duration: 500, //翻页速度，值越小越快
            acceleration: !isChrome(), //硬件加速, 默认true, 如果是触摸设备设置为true
            gradients: true, //翻页时的阴影渐变, 默认true
            autoCenter: true, //自动居中, 默认false
            // Elevation from the edge of the flipbook when turning a page
            elevation: 50,
            // page: 1, //设置当前显示第几页
            pages: imgList.value.length, //总页数
            display: $.isTouch ? 'single' : 'double', //单页显示/双页显示  single/double
            //监听事件
            when: {
              turning: function (event, page, view) {
                var book = $(this),
                  currentPage = book.turn('page'),
                  pages = book.turn('pages');
                // Update the current URI
                Hash.go('page/' + page).update();

                // Show and hide navigation buttons

                disableControls(page);
              },

              turned: function (event, page, view) {
                disableControls(page);
                // console.log(page);
                $(this).turn('center');
                // $('#slider').slider('value', getViewNumber($(this), page));
                currentPage.value = page;
                if (page == 1) {
                  $(this).turn('peel', 'br');
                }
                // 播放
                if (page >= 1 && isSounds.value) {
                  var flipAudio = document.getElementById('flipAudio');
                  flipAudio.play();
                }
              },

              missing: function (event, pages) {
                // Add pages that aren't in the magazine
                // console.log(pages);
                for (var i = 0; i < pages.length; i++) {
                  // console.log(imgList.value[pages[i] - 1]);
                  let pic = imgList.value[pages[i] - 1]
                    ? imgList.value[pages[i] - 1].imgThumbnail
                    : '';
                  addPage(pages[i], $(this), pic);
                }
              }
            }
          });

          // Zoom.js

          $('.magazine-viewport').zoom({
            flipbook: $('.magazine'),

            max: function () {
              // return largeMagazineWidth() / $('.magazine').width();
              return 1.8;
            },

            when: {
              swipeLeft: function () {
                $(this).zoom('flipbook').turn('next');
              },

              swipeRight: function () {
                $(this).zoom('flipbook').turn('previous');
              },

              resize: function (event, scale, page, pageElement) {
                if (scale == 1) loadSmallPage(page, pageElement);
                else loadLargePage(page, pageElement);
              },

              zoomIn: function () {
                $('#slider-bar').hide();
                $('.made').hide();

                $('.magazine').removeClass('animated').addClass('zoom-in');

                $('.zoom-icon')
                  .removeClass('zoom-icon-in')
                  .addClass('zoom-icon-out');
                isZoomIn.value = false;
                console.log($.isTouch);
                if (!window.escTip && !$.isTouch) {
                  // escTip = true;

                  $('<div />', { class: 'exit-message' })
                    .html('<div>Press ESC to exit</div>')
                    .appendTo($('body'))
                    .delay(2000)
                    .animate({ opacity: 0 }, 500, function () {
                      $(this).remove();
                    });
                }
              },

              zoomOut: function () {
                $('#slider-bar').fadeIn();
                $('.exit-message').hide();

                $('.thumbnails').fadeIn();

                $('.made').fadeIn();

                $('.zoom-icon')
                  .removeClass('zoom-icon-out')
                  .addClass('zoom-icon-in');
                isZoomIn.value = true;
                setTimeout(function () {
                  $('.magazine').addClass('animated').removeClass('zoom-in');

                  resizeViewport();
                }, 0);
              }
            }
          });

          // Zoom event

          if ($.isTouch) $('.magazine-viewport').bind('zoom.doubleTap', zoomTo);
          else $('.magazine-viewport').bind('zoom.tap', zoomTo);

          // Using arrow keys to turn the page

          $(document).keydown(function (e) {
            var previous = 37,
              next = 39,
              esc = 27;

            switch (e.keyCode) {
              case previous:
                // left arrow

                $('.magazine').turn('previous');

                e.preventDefault();

                break;

              case next:
                //right arrow

                $('.magazine').turn('next');

                e.preventDefault();

                break;

              case esc:
                $('.magazine-viewport').zoom('zoomOut');

                e.preventDefault();

                break;
            }
          });

          // URIs - Format #/page/1

          Hash.on('^page/([0-9]*)$', {
            yep: function (path, parts) {
              var page = parts[1];

              if (page !== undefined) {
                if ($('.magazine').turn('is'))
                  $('.magazine').turn('page', page);
                currentPage.value = page;
              }
            },

            nop: function (path) {
              if ($('.magazine').turn('is')) $('.magazine').turn('page', 1);
            }
          });

          $(window)
            .resize(function () {
              resizeViewport();
            })
            .bind('orientationchange', function () {
              resizeViewport();
            });

          // Events for thumbnails

          $('.thumbnails').click(function (event) {
            var page;

            if (
              event.target &&
              (page = /page-([0-9]+)/.exec($(event.target).attr('class')))
            ) {
              $('.magazine').turn('page', page[1]);
            }
          });

          $('.thumbnails li')
            .bind($.mouseEvents.over, function () {
              $(this).addClass('thumb-hover');
            })
            .bind($.mouseEvents.out, function () {
              $(this).removeClass('thumb-hover');
            });

          if ($.isTouch) {
            $('.thumbnails')
              .addClass('thumbanils-touch')
              .bind($.mouseEvents.move, function (event) {
                event.preventDefault();
              });
          } else {
            $('.thumbnails ul')
              .mouseover(function () {
                $('.thumbnails').addClass('thumbnails-hover');
              })
              .mousedown(function () {
                return false;
              })
              .mouseout(function () {
                $('.thumbnails').removeClass('thumbnails-hover');
              });
          }

          // Regions

          if ($.isTouch) {
            $('.magazine').bind('touchstart', regionClick);
          } else {
            $('.magazine').click(regionClick);
          }

          // Events for the next button

          $('.next-button')
            .bind($.mouseEvents.over, function () {
              $(this).addClass('next-button-hover');
            })
            .bind($.mouseEvents.out, function () {
              $(this).removeClass('next-button-hover');
            })
            .bind($.mouseEvents.down, function () {
              $(this).addClass('next-button-down');
            })
            .bind($.mouseEvents.up, function () {
              $(this).removeClass('next-button-down');
            })
            .click(function () {
              $('.magazine').turn('next');

              setTimeout(function () {
                setArrows();
              }, 300);
            });

          // Events for the next button

          $('.previous-button')
            .bind($.mouseEvents.over, function () {
              $(this).addClass('previous-button-hover');
            })
            .bind($.mouseEvents.out, function () {
              $(this).removeClass('previous-button-hover');
            })
            .bind($.mouseEvents.down, function () {
              $(this).addClass('previous-button-down');
            })
            .bind($.mouseEvents.up, function () {
              $(this).removeClass('previous-button-down');
            })
            .click(function () {
              $('.magazine').turn('previous');

              setTimeout(function () {
                setArrows();
              }, 300);
            });

          // tools
          $('#tofirst').click(function () {
            $('.magazine').turn('page', 1);
          });
          $('#topreview').click(function () {
            $('.magazine').turn('previous');
          });
          $('#tonext').click(function () {
            $('.magazine').turn('next');
          });
          $('#tolast').click(function () {
            $('.magazine').turn('page', imgList.value.length);
          });
          $('#autoplay').click(function () {
            if (isPlay.value) {
              isPlay.value = false;
              // timer必须在外部定义，return出来，不然else中拿不到 /难受(ㄒoㄒ)/~~
              timer.value = setInterval(() => {
                $('.magazine').turn('next');
              }, 3000);
            } else {
              isPlay.value = true;
              clearInterval(timer.value);
              timer.value = null;
            }
          });
          $('#soundshandle').click(function () {
            if (isSounds.value) {
              isSounds.value = false;
              var bgAudio = document.getElementById('bgAudio');
              bgAudio.pause();
            } else {
              isSounds.value = true;
              var bgAudio = document.getElementById('bgAudio');
              bgAudio.play();
            }
          });
          $('#tofullscreen').click(function () {
            if (isFullscreen.value) {
              isFullscreen.value = false;
              var viewFullScreen = document.getElementById('tofullscreen');
              if (viewFullScreen) {
                var docElm = document.documentElement;
                if (docElm.requestFullscreen) {
                  docElm.requestFullscreen();
                } else if (docElm.msRequestFullscreen) {
                  docElm.msRequestFullscreen();
                } else if (docElm.mozRequestFullScreen) {
                  docElm.mozRequestFullScreen();
                } else if (docElm.webkitRequestFullScreen) {
                  docElm.webkitRequestFullScreen();
                }
              }
            } else {
              isFullscreen.value = true;
              var cancelFullScreen = document.getElementById('tofullscreen');
              if (cancelFullScreen) {
                if (document.exitFullscreen) {
                  document.exitFullscreen();
                } else if (document.msExitFullscreen) {
                  document.msExitFullscreen();
                } else if (document.mozCancelFullScreen) {
                  document.mozCancelFullScreen();
                } else if (document.webkitCancelFullScreen) {
                  document.webkitCancelFullScreen();
                }
              }
            }
          });

          // 自动slider控件，vue中支持不了 插件
          $('#slider').slider({
            min: 1,
            max: numberOfViews(flipbook),

            start: function (event, ui) {
              // if (!window._thumbPreview) {
              //   let _thumbPreview = $('<div />', { class: 'thumbnail' }).html(
              //     '<div></div>'
              //   );
              //   setPreview(ui.value);
              //   _thumbPreview.appendTo($(ui.handle));
              // } else setPreview(ui.value);
              // 修改判断值 tina
              if ($('.thumbnail').length > 0) {
                setPreview(ui.value);
              } else {
                let _thumbPreview = $('<div />', { class: 'thumbnail' }).html(
                  '<div></div>'
                );
                setPreview(ui.value);
                _thumbPreview.appendTo($(ui.handle));
              }
              moveBar(false);
            },

            slide: function (event, ui) {
              setPreview(ui.value);
            },

            stop: function () {
              if ($('.thumbnail').length > 0)
                $('.thumbnail').removeClass('show');

              $('.magazine').turn(
                'page',
                Math.max(1, $(this).slider('value') * 2 - 2)
              );
            }
          });

          resizeViewport();

          $('.magazine').addClass('animated');
        });
      };

      const toPage = (i) => {
        currentPage.value = i + 1;
        $('.magazine').turn('page', currentPage.value); //进度条跳转到对应的页数
      };
      const toPageMenu = (i) => {
        if (i <= 0) {
          currentPage.value = 1;
        } else {
          currentPage.value = i;
        }
        menuvisible.value = false;
        $('.magazine').turn('page', currentPage.value); //目录跳转到对应的页数
      };
      const jumpPage = function () {
        var newpage = $('#currentPageIndexTextField').val();
        // console.log(newpage);
        currentPage.value = newpage;
        $('.magazine').turn('page', newpage);
      };
      return {
        imgList,
        menuList,
        toPage,
        toPageMenu,
        jumpPage,
        listPageFrontList,
        API_BASE_URL,
        currentPage,
        sliderList,
        handleVisiable,
        isZoomIn,
        isPlay,
        isFullscreen,
        isSounds,
        timer,
        isTouch,
        visible,
        menuvisible,
        afterVisibleChange,
        showDrawer,
        onClose,
        showinfoimg,
        copyUrl,
        createQrcode,
        posterContent,
        isAdmin,
        posterImg,
        posterImgShow,
        showposter,
        qrcodetext,
        qrcodetextHandle,
        createPoster,
        downPoster,
        downloadQrcode,
        onSearch
      };
    },
    onUnmounted() {
      document.addEventListener('visibilitychange', handleVisiable);
    }
  };
</script>
<!-- <style src="../../assets/css/frontEndAlbum.less"></style> -->
<style lang="less">
  @import '../../assets/css/frontEndAlbum.less';
</style>
